<template>
    <div class="orderRightMain">
        <div class="orderTitle">
            <h3>我的订单</h3>
        </div>
        <div class="orderList">
            <div class="tab">
                <ul v-if="isShowTab">
                    <li v-for="(item,index) in allTabs" :key="index" :class="item.class" @click="selectTab(item)" :style="selectStyle(item)">
                        <b v-if="item.class=='awaysOrders'">{{item.name}}</b>
                        <span v-else>{{item.name}}</span>
                    </li>
                </ul>
                <div class="searchArea">
                    <input type="text" />
                    <span class="searchButton">
                        <b></b>
                    </span>
                </div>
            </div>
            <ul class="title">
                <li>
                    <span style="width: 100px;display: flex;justify-content: center;align-items: center">近三个月订单</span>
                    <span style="display: flex;flex:1;justify-content: center">订单详情</span>
                </li>
                <li>收货人</li>
                <li>金额</li>
                <li>全部状态</li>
                <li><span>操作</span><b></b></li>
            </ul>
            <ul class="contentList">
                <li v-for="(item,index) in orderArrays" :key="index">
                    <div class="orderListContentHeader">
                        <span>
                            <span style="margin-left: 20px">{{item.createDate}}</span>
                            <span style="margin-left: 30px">
                                <span>订单号:</span>
                                <span style="margin-left: 5px;color: #333">{{item.orderId}}</span>
                            </span>
                        </span>
                        <span v-if="item.orderStatus.status!=0" @click="deleteOrder(item)"></span>
                    </div>
                    <div class="goodDiaplayArea">
                        <div>
                            <ul>
                                <li v-for="(orderItem,index) in item.orderDetialList" :key="index">
                                    <ul>
                                        <li><img width="60px" height="60px" :src="orderItem.image.split(',')[0]"></li>
                                        <li style="width: 240px;cursor: pointer">{{orderItem.title}}</li>
                                        <li>X{{orderItem.num}}</li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div>
                            <ul>
                                <li style="display: flex;flex-direction:column;align-items:center"><span style="margin-top: 15px">{{item.receiver}}</span></li>
                                <li style="display: flex;flex-direction:column;align-items:center">
                                    <strong style="margin-top: 15px">应付</strong>
                                    <strong style="margin-top: 3px">¥{{item.totalPay}}</strong>
                                    <span style="margin-top: 3px;width:80%;border-top:solid 1px #E5E5E5;text-align: center">{{getPayType(item.paymentType)}}</span>
                                </li>
                                <li style="display: flex;flex-direction: column;align-items:center">
                                    <span style="margin-top: 15px" :style="getOrderStatusStyle(item.orderStatus.status)">{{getOrderStatusText(item.orderStatus.status)}}</span>
                                    <span style="margin-top:3px">订单详情</span>
                                </li>
                                <li style="display: flex;flex-direction: column;align-items:center">
                                    <span style="margin-top: 15px;color: #999;" v-if="item.orderStatus.status==0">剩余23时48分</span>
                                    <span style="margin-top: 3px;border: 1px solid #e4393c;color: #e4393c;width: 85px;height:18px;line-height: 18px;text-align: center;font-weight: 700;border-radius: 2px;cursor: pointer" v-if="item.orderStatus.status==0" @click="goPay(item)">付款</span>
                                    <span style="margin-top: 3px;cursor: pointer" v-if="item.orderStatus.status!=4" @click="cacelOrder(item)">取消订单</span>
                                    <span class="justBuy"><b></b>立即购买</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <div style="display: flex;justify-content: flex-end">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 50, 100]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>

            </ul>
        </div>
        <div class="guestLikeList">
            <h3>猜你喜欢</h3>
        </div>
    </div>
</template>
<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator'
    import { Action, Getter } from 'vuex-class'
    import logo from '@/components/common/images/logo.png'
    import { namespace } from 'vuex-class';
    import CustomerApiActions from '@/components/api/customer-api-actions';
    import * as _ from 'lodash'
    import moment from "moment";
    import { OrderStatus } from "@/components/common/vo";
    @Component({
        components: {}
    })
    export default class OrderRightMain extends Vue {
        public allTabs = [
            { name: "全部订单", isSelected: true },
            { name: "待付款" },
            { name: "待收货" },
            { name: "待评价" },
            { name: "我的常购商品", class: "awaysOrders" },
            { name: "订单回收站", class: "disableOrders" },
        ];
        public orderArrays = new Array < any > ();
        public isShowTab: boolean = true;
        public total: any = 0;
        public currentPage = 1;
        public pageSize = 10;
        //获取订单信息
        public async created() {
            await this.getPageData();
        }
        public async getPageData() {
            let apiActions = new CustomerApiActions(this);
            let orders: any = await apiActions.getOrders({ pageInfo: { pageNum: this.currentPage, pageSize: this.pageSize } });
            let orderList = orders.data.list;
            this.total = orders.data.total;
            for (let i = 0; i < orderList.length; i++) {
                let item: any = orderList[i];
                item.createDate = moment(item.createTime).format("YYYY-MM-DD HH:mm");
            }
            this.orderArrays = orderList;
        }
        public async handleSizeChange(pageInfo: any) {
            this.pageSize = pageInfo;
            await this.getPageData();
        }
        public async handleCurrentChange(pageInfo: any) {
            this.currentPage = pageInfo;
            await this.getPageData();
        }
        public goPay(item: any) {
            window.open(`/portal/#/pay?orderId=${item.orderId}`)
        }
        public async cacelOrder(item: any) {
            let apiActions = new CustomerApiActions(this);
            await apiActions.updateOrder({
                orderStatus: {
                    orderId: item.orderId,
                    status: OrderStatus.CANCEL,
                    createTime: new Date()
                }
            });
            await this.getPageData();
        }
        public getOrderStatusStyle(status: any) {
            if (OrderStatus.UNPAY == status) {
                return {
                    color: '#ff6c00'
                };
            }
            if (OrderStatus.PAYED == status) {
                return {
                    color: '#aaa'
                };
            }
            if (OrderStatus.NOCONFIRM == status) {
                return {
                    color: '#aaa'
                };
            }
            if (OrderStatus.COMPLETE == status) {
                return {
                    color: '#aaa'
                };
            }
            if (OrderStatus.CANCEL == status) {
                return {
                    color: '#aaa'
                };
            }
        }
        public getOrderStatusText(status: any) {
            if (OrderStatus.UNPAY == status) {
                return "等待付款";
            }
            if (OrderStatus.PAYED == status) {
                return "已付款";
            }
            if (OrderStatus.NOCONFIRM == status) {
                return "等待确认";
            }
            if (OrderStatus.COMPLETE == status) {
                return "已完成";
            }
            if (OrderStatus.CANCEL == status) {
                return "已取消";
            }
        }
        public getPayType(payType: any) {
            if (payType == 1) {
                return "在线支付";
            }
            return "货到付款";
        }
        public async deleteOrder(item: any) {
            let apiActions = new CustomerApiActions(this);
            await apiActions.deleteOrder({ orderId: item.orderId });
            await this.getPageData();
        }
        public selectStyle(item: any) {
            if (item.isSelected) {
                return {
                    color: "#e4393c",
                    'border-bottom': "2px solid #e4393c"
                }
            }
            return {}
        }
        /**
         * @param item
         */
        public selectTab(item: any) {
            this.allTabs.forEach(curItem => {
                if (curItem.name == item.name) {
                    curItem.isSelected = true;
                } else {
                    curItem.isSelected = false;
                }
            });
            this.isShowTab = false;
            this.$nextTick(() => {
                this.isShowTab = true;
            })
        }
    }
</script>
<style lang="less">
    .orderRightMain {
        width: 100%;

        .orderTitle {
            padding: 10px 20px 10px;
            margin-top: 20px;
            background-color: #fff;

            h3 {
                font-size: 12px;
                color: #666;
                font-family: '\5b8b\4f53';
                line-height: 18px;
            }
        }

        .orderList {
            .orderListContentHeader {
                border: 1px solid #e5e5e5;
                background: #f5f5f5;
                height: 31px;
                line-height: 31px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #aaa;

                >span:nth-child(2) {
                    width: 13px;
                    height: 13px;
                    font-size: 0;
                    overflow: hidden;
                    vertical-align: middle;
                    cursor: pointer;
                    margin-right: 20px;
                    background: url(//misc.360buyimg.com/user/myjd/ordercenter/css/i/order-icons.png) -23px -132px no-repeat;
                    color: #333;
                }
            }

            padding: 10px 20px 10px;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: #fff;

            .tab {
                display: flex;
                justify-content: space-between;

                >ul {
                    margin: 0px;
                    padding: 0px;
                    height: 20px;
                    display: flex;

                    >li:nth-child(1) {
                        margin-left: 0px;
                        cursor: pointer;
                    }

                    >li {
                        list-style-type: none;
                        margin: 0px;
                        padding: 0px;
                        margin-left: 20px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                    }

                    >li:hover {
                        color: #e4393c;
                    }

                    .awaysOrders {
                        margin-left: 100px;
                        color: #333;
                    }

                    .disableOrders {
                        margin-left: 100px;
                    }
                }

                .searchArea {
                    display: flex;
                    align-items: center;

                    .searchButton {
                        width: 52px;
                        height: 23px;
                        line-height: 99em;
                        border: 1px solid #ddd;
                        border-left: 0;
                        text-align: center;
                        background-color: #f7f7f7;
                        display: inline-block;
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        b {
                            display: inline-block;
                            width: 18px;
                            height: 16px;
                            position: absolute;
                            background: url(//misc.360buyimg.com/user/myjd/ordercenter/css/i/order-icons.png) -8px -58px;
                        }
                    }

                    input {
                        float: left;
                        width: 158px;
                        height: 18px;
                        line-height: 18px;
                        padding: 2px 5px 3px;
                        border: 1px solid #ccc;
                    }
                }
            }

            .title {
                margin: 0px;
                padding: 0px;
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: 10px;

                >li {
                    margin: 0px;
                    padding: 0px;
                    list-style-type: none;
                    background: #f5f5f5;
                    height: 32px;
                    display: flex;
                    align-items: center;
                }

                >li:nth-child(1) {
                    width: 60%;
                }

                >li:nth-child(2) {
                    width: 10%;
                }

                >li:nth-child(3) {
                    width: 10%;
                }

                >li:nth-child(4) {
                    width: 10%;
                }

                >li:nth-child(5) {
                    width: 10%;
                }
            }
        }

        .guestLikeList {
            background-color: #fff;
            height: 100px;

            h3 {
                font-size: 12px;
                color: #666;
                font-family: '\5b8b\4f53';
                line-height: 18px;
                margin-left: 20px;
                display: inline-block;
                margin-top: 10px;
            }
        }

        .contentList {
            margin: 0px;
            padding: 0px;

            >li {
                width: 100%;
                margin: 0px;
                padding: 0px;
                list-style-type: none;
                margin-top: 10px;
                border: 1px solid #e5e5e5;

                .goodDiaplayArea {
                    display: flex;
                    flex-direction: row;

                    div:nth-child(1) {
                        width: 75%;
                        display: flex;

                        >ul {
                            width: 100%;
                            display: flex;
                            margin: 0px;
                            padding: 0px;
                            flex-direction: column;

                            >li {
                                margin: 0px;
                                padding: 0px;
                                height: 70px;
                                list-style-type: none;
                                border: 1px solid #e5e5e5;
                                padding: 20px;

                                ul {
                                    display: flex;
                                    margin: 0px;
                                    padding: 0px;
                                    width: 100%;
                                    height: 100%;

                                    li {
                                        display: flex;
                                        flex-direction: column;
                                        list-style-type: none;
                                    }

                                    li:nth-child(1) {
                                        width: 70px;
                                    }

                                    li:hover {
                                        color: red;
                                    }

                                    li:nth-child(2) {
                                        width: 240px;
                                    }

                                    li:nth-child(3) {
                                        flex: 1;
                                        display: flex;
                                        align-items: center;
                                        color: #aaa;
                                        font-family: verdana;
                                        font: 12px/150% tahoma, arial, Microsoft YaHei, Hiragino Sans GB, "\u5b8b\u4f53", sans-serif;
                                    }
                                }
                            }
                        }
                    }

                    div:nth-child(2) {
                        width: 60%;

                        >ul {
                            margin: 0px;
                            padding: 0px;
                            display: flex;
                            flex-direction: row;
                            width: 100%;
                            height: 100%;

                            >li {
                                margin: 0px;
                                padding: 0px;
                                flex: 1;
                                list-style-type: none;
                                border-right: 1px solid #e5e5e5;
                            }

                            .justBuy {
                                margin-top: 3px;
                                padding: 2px 0 3px;
                                background: #f5f5f5;
                                border: 1px solid #ddd;
                                color: #333;
                                width: 85px;
                                text-align: center;
                                cursor: pointer;

                                b {
                                    display: inline-block;
                                    vertical-align: middle;
                                    width: 12px;
                                    height: 17px;
                                    margin-right: 5px;
                                    background: url(//misc.360buyimg.com/user/myjd/ordercenter/css/i/order-icons.png) -22px -180px no-repeat;
                                }
                            }

                            .justBuy:hover {
                                color: red;
                                border: 1px solid red;
                            }
                        }
                    }
                }
            }

            .el-pagination {
                max-width: 450px;
            }
        }
    }
</style>